import React,  {Component} from 'react';
import {connect}  from  'dva'
import ReactDOM from 'react-dom';
import {    Form, Input,Select, Tooltip, Icon, Cascader, Radio , Row, Col, Checkbox, Button, AutoComplete,Table, Modal ,InputNumber, Popconfirm} from 'antd';


const FormItem = Form.Item;


  
const CollectionCreateForm = Form.create()(

  
  class extends React.Component {
   
    render() {
      const {
        visible, onCancel, onCreate, form,
      } = this.props;
      const { getFieldDecorator } = form;
    
      return (
        <Modal
          visible={visible}
          title="产品名称"
          okText="确定"
          onCancel={onCancel}
          onOk={onCreate}
        >
          <Form layout="vertical">
            <FormItem label="产品名称">
              {getFieldDecorator('name', {
                rules: [{ required: true, message: 'Please input the title of collection!' }],
              })(
                <Input />
              )}
            </FormItem>
            <FormItem  label="产品类型" className="collection-create-form_last-form-item">
              {getFieldDecorator('type', {
                initialValue: 'App客户端',
              })(
                <Radio.Group>
                  <Radio value="01">App客户端</Radio>
                  <Radio value="02">公众号</Radio>
                  <Radio value="03">程序</Radio>
                  <Radio value="04">微博</Radio>
                  <Radio value="05">H5应用</Radio>
                </Radio.Group>
              )}
            </FormItem>
            <FormItem label="所属平台" className="collection-create-form_last-form-item">
             {getFieldDecorator('platform', {
                initialValue: 'Android平台',
              })( 
               <Radio.Group >
                  <Radio value="Android">Android平台</Radio>
                  <Radio value="iOS">iOS平台</Radio>
                  <Radio value="WeChat">微信</Radio>
                  <Radio value="QQ">QQ</Radio>
                  <Radio value="Alipay">支付宝</Radio>
                  <Radio value="Weibo">微博</Radio>
                  <Radio value="PC">电脑端</Radio>
                </Radio.Group> 
            )} 
              
            </FormItem>
           
          </Form>
        </Modal>
      );
    }
  }
)
;
@connect(({ tab, loading }) => ({
  tab,
  loading: loading.models.tab,
}))
class CollectionsPage extends React.Component {
  state = {
    visible: false,
  };

  showModal = () => {
    this.setState({ visible: true });
  }

  handleCancel = () => {
    this.setState({ visible: false });
  }

  handleCreate = () => {
  
    const form = this.formRef.props.form;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const {dispatch }=this.props
      dispatch({
        type:'tab/modaldata',
        payload: {
          ...values,
        },
      })
      form.resetFields();
      this.setState({ visible: false });
    });
  }

  saveFormRef = (formRef) => {
    this.formRef = formRef;
  }

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>添加</Button>
        <CollectionCreateForm
          wrappedComponentRef={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
        />
      </div>
    );
  }
}


export default CollectionsPage;



// class   remark extends React.Component {
//     constructor(props) {
//       super(props);
//     }

//  
// }

// export default  Remark
